<template>
	<view class="qigoodsmianbox">
		<view class="showradio">
			<radio
				:checked="goods.goods_state"
				v-if="showRadio"
				@click="radioClickHandler"
			></radio>
		</view>
		<view class="itemimage" @tap="navtoimg(goods)">
			<image
				:src="
					goods.goods_big_logo || goods.goods_small_logo || defaultPic
				"
				mode="widthFix"
			></image>
		</view>
		<view class="itemright">
			<view class="goods-name">{{ goods.goods_name }}</view>
			<view class="goods-price">
				<view class="price">￥{{ goods.goods_price   }} </view>
				<view class="upmianbox" v-if="showsubtract">
					<view class="upsum">
						<view @tap="subtract">-</view>
						<view>{{ goods.goods_count }}</view>
						<view @tap="addsum">+</view>
					</view>
					<view class="iconfont icon-shanchu" @tap="tapdelet"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex'; // 引入useStore 方法
const store = useStore(); // 该方法用于返回store 实例
const emit = defineEmits([
	'radio-change',
	'emitsubtract',
	'emitaddsum'
]);
const defaultPic = ref(
	'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
);
const props = defineProps({
	goods: {
		type: Object,
		default: ''
	},
	showRadio: {
		type: Boolean,
		default: false
	},
	showsubtract: {
		type: Boolean,
		default: false
	}
});
const radioClickHandler = () => {
	emit('radio-change', {
		goods_id: props.goods.goods_id,
		goods_state: !props.goods.goods_state
	});
};
const subtract = () => {
	if (props.goods.goods_count > 1) {
		let emitsubtract = {
			goods_id: props.goods.goods_id,
			goods_count: --props.goods.goods_count
		};
		store.commit('qi_cart/updateGoodsCount', emitsubtract);
	}
};
const addsum = () => {
	let goodsaddsum = {
		goods_id: props.goods.goods_id,
		goods_count: ++props.goods.goods_count
	};
	store.commit('qi_cart/updateGoodsCount', goodsaddsum);
};
const tapdelet = () => {
	store.commit('qi_cart/DELETEGOODS', props.goods.goods_id);
};
const navtoimg = (id) =>{
	uni.navigateTo({
		url:'/subpages/goods_detail/goods_detail?goods_id=' + id.goods_id
	  })
}
</script>

<style lang="scss">
.qigoodsmianbox {
	display: flex;
	padding: 10px 0;
	.showradio {
		display: flex;
		align-items: center;
		padding: 0 10px;
		.iputckradio {
			border-radius: 90px;
			height: 20px;
			width: 20px;
			color: pink;
			background-color: red;
		}
	}
	.itemimage {
		image {
			width: 120px;
		}
	}
	.itemright {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		padding: 0 10px;
		.goods-name {
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 3;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.goods-price {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price {
				color: red;
			}
			.upmianbox {
				display: flex;
				.icon-shanchu {
					line-height: 40px;
					padding-left: 10px;
				}
			}
			.upsum {
				display: flex;
				height: 40px;
				width: 120px;
				justify-content: center;
				align-items: center;
				text-align: center;
				line-height: 40px;
				view:nth-child(2) {
					flex: 1;
					background-color: #fff;
				}
				:last-child {
					flex: 1;
					border-top-right-radius: 10px;
					border-bottom-right-radius: 10px;
					background-color: #f2f9f9;
				}
				:first-child {
					flex: 1;
					border-top-left-radius: 10px;
					border-bottom-left-radius: 10px;
					background-color: #f2f9f9;
				}
			}
		}
	}
}
</style>
